<template>
  <div class="bottom-navigation">
    <div class="nav-item" @click="navigateTo('/')" :class="{ active: isActive('/') }">
      <el-icon><House /></el-icon>
      <span>首页</span>
    </div>
    
    <div class="nav-item" @click="navigateTo('/performances')" :class="{ active: isActive('/performances') }">
      <el-icon><Calendar /></el-icon>
      <span>演出</span>
    </div>
    
    <div class="nav-item" @click="navigateTo('/artists')" :class="{ active: isActive('/artists') }">
      <el-icon><User /></el-icon>
      <span>艺人</span>
    </div>
    
    <div class="nav-item" @click="navigateTo('/navigation')" :class="{ active: isActive('/navigation') }">
      <el-icon><Location /></el-icon>
      <span>导航</span>
    </div>
    
    <div class="nav-item" @click="navigateTo('/profile')" :class="{ active: isActive('/profile') }">
      <el-icon><Setting /></el-icon>
      <span>我的</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { House, Calendar, User, Location, Setting } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

// 检查当前路由是否激活
const isActive = (path: string) => {
  return route.path === path || route.path.startsWith(path + '/')
}

// 导航到指定页面
const navigateTo = (path: string) => {
  if (route.path !== path) {
    router.push(path)
  }
}
</script>

<style scoped>
.bottom-navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
}

.nav-item:hover {
  color: #667eea;
}

.nav-item.active {
  color: #667eea;
}

.nav-item .el-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.nav-item span {
  font-size: 12px;
  font-weight: 500;
}

/* 为底部导航腾出空间 */
:deep(.app-container) {
  padding-bottom: 80px;
}

@media (max-width: 768px) {
  .bottom-navigation {
    height: 70px;
  }
  
  .nav-item .el-icon {
    font-size: 22px;
  }
  
  .nav-item span {
    font-size: 11px;
  }
}
</style> 